<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>总结生命周期</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    常用的生命周期钩子：
      1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
      2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
    关于销毁Vue实例：
      1.销毁后借助Vue开发者工具看不到任何信息
      2.销毁后自定义事件会失效，但原生DOM事件依然有效
      3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了


-->

<div id="root">
  <h2 :style="{opacity}">欢迎学习Vue</h2>
  <button @click="opacity=1">透明度设置为1</button>
  <button @click="stop">点我停止变换</button>
</div>

</body>
<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',

    /*template:`
      <div>
        <h2>当前n值是：{{ n }}</h2>
        <button @click="add">点我n+1</button>
      </div>
    `,*/

    data: {
      opacity: 1
    },
    beforeCreate() {
    },
    created() {

    },
    beforeMount() {

    },
    // Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用mounted
    mounted() {
      this.timer = setInterval(() => {
        this.opacity -= 0.01
        if (this.opacity <= 0) this.opacity = 1
      }, 16)
    },
    beforeUpdate() {

    },
    updated() {

    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    destroyed() {

    },
    methods: {
      stop() {
        // clearInterval(this.timer)
        this.$destroy()
      }
    },
  })

  // 方法三
  /* window.onload=()=>{
     vm.change()
   }*/

  //  通过外部的定时器实现（不推荐）
  /* setInterval(()=>{
     vm.opacity -=0.01
     if(vm.opacity<=0) vm.opacity=1
   },16)*/
</script>
</html>